<template>
  <div
    v-if="route.path !== '/login'"
    class="w-full flex justify-between px-11 py-5 z-[1100]"
    :class="[isHomePage ? 'absolute text-white' : 'text-black']"
  >
    <!-- Logo Section -->
    <div class="flex items-center">
      <v-img
        width="100"
        height="40"
        src="../../assets/logo.jpg"
        class="cursor-pointer"
        @click="navigateTo('/')"
      />

      <!-- Navigation Menu -->
      <div class="space-x-2.5 ml-7 text-base font-medium">
        <div
          v-for="item in menuList"
          :key="item.id"
          class="px-5 h-10 inline-block cursor-pointer text-center leading-10 shrink-0 font-medium rounded-full"
          :class="[
            isHomePage
              ? 'hover:bg-white/25'
              : '',appStore.activeMaterialCategory == item.id && !isHomePage ? 'bg-black' : ''
          ]"
          @click="navigateToCategory(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- Auth Section -->
    <div>
      <v-btn
        v-if="!AuthStore.phone"
        rounded="xl"
        @click="navigateTo('/login')"
        :class="[isHomePage ? 'bg-white' : 'bg-black']"
      >
        登录/注册
      </v-btn>

      <v-menu
        v-else
        min-width="200"
        rounded
      >
        <template #activator="{ props }">
          <v-btn
            v-bind="props"
            variant="plain"
          >
            <span>{{ AuthStore.maskedPhone }}</span>
          </v-btn>
        </template>

        <v-card>
          <v-card-text>
            <div class="mx-auto text-center">
              <v-avatar color="black">
                <span>{{ AuthStore.maskedPhone }}</span>
              </v-avatar>
              <h3>{{ AuthStore.maskedPhone }}</h3>

              <v-divider class="my-3" />

              <v-btn
                variant="text"
                rounded
                @click="navigateTo('/user')"
              >
                个人中心
              </v-btn>

              <v-divider class="my-3" />

              <v-btn
                variant="text"
                rounded
                @click="logout"
              >
                退出登录
              </v-btn>
            </div>
          </v-card-text>
        </v-card>
      </v-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, watchEffect, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useAppStore } from '@/stores/app'
import { storeToRefs } from 'pinia'

const router = useRouter()
const route = useRoute()
const AuthStore = useAuthStore()
const appStore = useAppStore()
const logout=()=>{
  AuthStore.logout()
 if (!["/","/categoryList"].includes(route.path)) {
    router.push('/')
  }
}
onMounted(() => {
})
// Use storeToRefs for reactive store properties
const { materialCategory } = storeToRefs(appStore)
const menuList = computed(() => materialCategory.value)

// Computed property for home page check
const isHomePage = computed(() => route.path === '/')

// Navigation handlers
const navigateTo = (path) => {
  router.push(path)
}

const navigateToCategory = (item) => {
  appStore.activeMaterialCategory = item.id
  router.push({
    name: 'categoryList', // Assuming you have named routes
    query: { categoryId: item.id }
  })
}
</script>
